<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['platform:rubik:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['platform:rubik:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['platform:rubik:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="rubikList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="魔方管理id" align="center" prop="rubikId" />
      <el-table-column label="魔方类型" align="center" prop="rubikType" >
        <template slot-scope="scope">
          <div class="vertical-content">
            <div v-if="scope.row.rubikType === 1">样式一</div>
            <div v-if="scope.row.rubikType === 2">样式二</div>
            <div v-if="scope.row.rubikType === 3">样式三</div>
            <div v-if="scope.row.rubikType === 4">样式四</div>
            <div v-if="scope.row.rubikType === 5">样式五</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="效果图" align="center" width="100">
        <template v-slot="scope">
          <el-image
            class="el-image__inner__width"
            :src="scope.row.rubikImg"
            fit="fill"
            width="50%">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="显示顺序" align="center" prop="orderNum" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['platform:rubik:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['platform:rubik:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改魔方管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="魔方类型:" prop="rubikType">
          <el-radio-group v-model="form.rubikType" @change="handleRubikTypeChange">
            <el-radio
              v-for="item in rubikTypeOptions"
              :key="item.value"
              :label="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="效果图:" prop="rubikImg">
          <img v-if="form.rubikType" :src="form.rubikImg" class="avatar" style="width: 200px; height: 100px; display: block;">
        </el-form-item>
        <el-form-item label="显示顺序:" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
        </el-form-item>

        <el-form-item label="上传图片:" prop="setRubikData" class="label__add__font">
          <div v-if="setRubikData.length > 0">
            <el-table :data="setRubikData" border style="width: 100%">
              <el-table-column label="序号" align="center" width="100">
                <template slot-scope="scope">
                  <span>{{ `第${scope.$index + 1}张图片` }}</span>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="center" width="100">
                <template slot-scope="scope">
                  <el-upload
                    class="avatar-uploader"
                    :headers="uploadImg.headers"
                    :action="uploadImg.url"
                    :show-file-list="false"
                    :on-success="(response, file) => handleAvatarSuccess(response, file, scope.$index)"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="scope.row.fileUrl" :src="scope.row.fileUrl" class="avatar" style="width: 80px;height: 80px;display: block;">
                    <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;font-size: 28px;color: #8c939d;width: 80px;height: 80px;line-height: 80px;text-align: center;"></i>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column label="链接" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.url" placeholder="请输入链接" readonly @click.native.prevent="handleChoose(scope.$index)" suffix-icon="el-icon-arrow-right"/>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择链接页面 -->
    <el-dialog :title="titleChoose" :visible.sync="openChoose" width="1000px" append-to-body>
      <div style="" class="flex-container">
        <div style="width: 200px;float: left;">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleMenuSelect"
            ref="menu">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-office-building"></i>
                <span>商城页面</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">专题页</el-menu-item>
                <el-menu-item index="1-2">商城链接</el-menu-item>
                <el-menu-item index="1-3">营销链接</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-goods"></i>
                <span>商品页面</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">商品</el-menu-item>
                <el-menu-item index="2-2">商品分类</el-menu-item>
                <el-menu-item index="2-3">拼团商品</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span>文章页面</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">文章</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span>自定义</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">自定义链接</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <div style="float: right; width: calc(100% - 200px);padding: 0 20px">
          <!-- 专题页右半部分 -->
          <div v-if="current === '1-1'">
            <el-table :data="currentTableData" style="width: 100%" :row-style="rowStyles">
              <el-table-column label="ID" align="center" prop="id">
                <template v-slot="scope">
                  <slot>{{scope.row.id}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="页面名称" align="center" prop="name" >
                <template v-slot="scope">
                  <slot>{{scope.row.name}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="页面链接" align="center" prop="url" width="250px">
                <template v-slot="scope">
                  <slot>{{scope.row.url}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="selectTableData(scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 商城链接右半部分 -->
          <div v-if="current === '1-2'">
            <div class="right_box">
              <div v-for="(category, categoryIndex) in currentTableData" :key="categoryIndex">
                <div>
                  <div class="cont">{{ category.name }}</div>
                  <div class="Box">
                    <div
                      v-for="(item, itemIndex) in category.items"
                      :key="itemIndex"
                      class="cont_box"
                      :class="{ 'on': item.id === selectedId }"
                      @click="selectItem(categoryIndex, itemIndex, item)"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--<div class="right_box">
              <div>
                <div class="cont">基础链接</div>
                <div class="Box">
                  <div class="cont_box on">商城首页</div>
                  <div class="cont_box">商城分类</div>
                  <div class="cont_box">购物车</div>
                  <div class="cont_box">分类商品列表</div>
                  <div class="cont_box">退款列表</div>
                  <div class="cont_box">我的订单</div>
                  <div class="cont_box">精品推荐</div>
                  <div class="cont_box">热门榜单</div>
                  <div class="cont_box">首发新品</div>
                  <div class="cont_box">促销单品</div>
                  <div class="cont_box">文章列表</div>
                  <div class="cont_box">个人中心</div>
                </div>
              </div>
              <div>
                <div class="cont">个人中心</div>
                <div class="Box">
                  <div class="cont_box">付费会员</div>
                  <div class="cont_box">收银页面</div>
                  <div class="cont_box">充值页面</div>
                  <div class="cont_box">订单核销</div>
                  <div class="cont_box">统计管理</div>
                  <div class="cont_box">联系客服</div>
                  <div class="cont_box">佣金排行</div>
                  <div class="cont_box">提现页面</div>
                  <div class="cont_box">个人资料</div>
                </div>
              </div>
              <div>
                <div class="cont">分销</div>
                <div class="Box">
                  <div class="cont_box">推广人列表</div>
                  <div class="cont_box">分销海报</div>
                  <div class="cont_box">我的推广</div>
                </div>
              </div>
            </div>-->
          </div>
          <!-- 营销链接右半部分 -->
          <div v-if="current === '1-3'">
            <div class="right_box">
              <div v-for="(category, categoryIndex) in currentTableData" :key="categoryIndex">
                <div>
                  <div class="cont">{{ category.name }}</div>
                  <div class="Box">
                    <div
                      v-for="(item, itemIndex) in category.items"
                      :key="itemIndex"
                      class="cont_box"
                      :class="{ 'on': item.id === selectedId }"
                      @click="selectItem(categoryIndex, itemIndex, item)"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 商品链接右半部分 -->
          <div v-if="current === '2-1'">
            <el-table :data="currentTableData" style="width: 100%" :row-style="rowStyles">
              <el-table-column label="ID" align="center" prop="id">
                <template v-slot="scope">
                  <slot>{{scope.row.id}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="商品图" align="center" width="60" prop="mainImgUrl">
                <template v-slot="scope">
                  <el-image
                    :src="scope.row.mainImgUrl"
                    fit="fill"
                    width="80%">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" align="center" prop="name" width="260">
                <template v-slot="scope">
                  <slot>{{scope.row.name}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="selectTableData(scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="totalGoods>0"
              :total="totalGoods"
              :page.sync="queryParamsGoods.pageNum"
              :limit.sync="queryParamsGoods.pageSize"
              @pagination="getGoodsList"
            />
          </div>
          <!-- 商品分类右半部分 -->
          <div v-if="current === '2-2'">
            <el-button
              type="info"
              plain
              icon="el-icon-sort"
              size="mini"
              @click="toggleExpandAll"
            >展开/折叠</el-button>
            <el-table
              v-if="refreshTable"
              :data="currentTableData"
              row-key="categoryId"
              :row-style="rowStyles"
              :default-expand-all="isExpandAll"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
              <el-table-column label="ID" align="center" prop="categoryId" :show-overflow-tooltip="true">
                <template v-slot="scope">
                  <slot>{{scope.row.categoryId}}</slot>
                </template>
              </el-table-column>
              <el-table-column prop="categoryName" align="center" label="分类名称">
                <template v-slot="scope">
                  <slot>{{scope.row.categoryName}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="分类图片" align="center" width="80">
                <template v-slot="scope">
                  <el-image
                    :src="scope.row.categoryImg"
                    fit="fill"
                    style="width: 60px;height: 60px;border-radius: 50%">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="selectTableData(scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 拼团商品链接右半部分 -->
          <div v-if="current === '2-3'">
            <el-table :data="currentTableData" style="width: 100%" :row-style="rowStyles">
              <el-table-column label="ID" align="center" prop="id">
                <template v-slot="scope">
                  <slot>{{scope.row.id}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="商品图" align="center" width="60" prop="mainImgUrl">
                <template v-slot="scope">
                  <el-image
                    :src="scope.row.mainImgUrl"
                    fit="fill"
                    width="80%">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="商品名称" align="center" prop="name" width="260">
                <template v-slot="scope">
                  <slot>{{scope.row.name}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="selectTableData(scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="totalGroup>0"
              :total="totalGroup"
              :page.sync="queryParamsGroup.pageNum"
              :limit.sync="queryParamsGroup.pageSize"
              @pagination="getGroupList"
            />
          </div>
          <!-- 文章页右半部分 -->
          <div v-if="current === '3-1'">
            <el-table :data="currentTableData" style="width: 100%" :row-style="rowStyles">
              <el-table-column label="ID" align="center" prop="id">
                <template v-slot="scope">
                  <slot>{{scope.row.id}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="文章图片" align="center" width="80" prop="mainImgUrl">
                <template v-slot="scope">
                  <el-image
                    :src="scope.row.mainImgUrl"
                    fit="fill"
                    width="80%">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="文章名称" align="center" prop="name" width="250px">
                <template v-slot="scope">
                  <slot>{{scope.row.name}}</slot>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="selectTableData(scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 自定义链接右半部分 -->
          <div v-if="current === '4-1'">
            <el-form ref="chooseAddressLinkRow" :model="chooseAddressLinkRow" label-width="100px" style="margin: 290px 0 0 100px">
              <el-form-item label="跳转路径" prop="url">
                <el-input v-model="chooseAddressLinkRow.url" placeholder="请输入正确跳转路径" style="width: 350px;"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitChooseForm">确 定</el-button>
        <el-button @click="cancelChoose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRubik, getRubik, delRubik, addRubik, updateRubik } from "@/api/platform/rubik";
import { getToken } from '@/utils/auth'
import Treeselect from '@riophae/vue-treeselect'
import { chooseAddressLink } from '@/api/platform/banner'
import { listChooseGoods } from '@/api/goods/goods'
import { listChooseGroup } from '@/api/marketing/group'
import { listCategory } from '@/api/goods/category'

export default {
  name: "Rubik",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalGoods: 0,
      totalGroup:0,
      // 魔方管理表格数据
      rubikList: [],
      setRubikData:[],
      rubikTypeOptions:[
        { value: 1, label: '样式一' },
        { value: 2, label: '样式二' },
        { value: 3, label: '样式三' },
        { value: 4, label: '样式四' },
        { value: 5, label: '样式五' },
      ],
      imageUrl:null,
      // 上传图片参数
      uploadImg: {
        // 设置上传的请求头部
        headers: { 'access-token': getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin/SPlatform/rubikUploadFile"
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 弹出层标题(选择链接)
      titleChoose: "",
      // 是否显示弹出层(选择链接)
      openChoose: false,
      indexChoose:null,
      current:'1-1',
      activeIndex:'1-1',// 初始选中“专题页”
      currentTableData: [], // 当前显示的数据表格的数据
      selectedId:null,
      chooseAddressLinkRow: {
        url:'',
      },
      // 重新渲染表格状态
      refreshTable: true,
      // 是否展开，默认全部折叠
      isExpandAll: false,
      // 商品查询参数
      queryParamsGoods: {
        pageNum: 1,
        pageSize: 10,
        goodsName: null,
        goodsField:"goods_id as id,goods_name as name,main_img_url",
      },
      // 商品查询参数
      queryParamsGroup: {
        pageNum: 1,
        pageSize: 10,
        groupName: null,
        groupField:"a.goods_group_id as id,a.group_name as name,b.main_img_url",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        rubikImg: null,
        rubikType: null,
        orderNum: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.handleMenuSelect('1-1');
    });
  },
  methods: {
    rowStyles({ row, rowIndex }) {
      // 根据当前选中的行来动态设置每一行的样式
      return {
        backgroundColor: this.selectedId && this.selectedId === row.id ? '#f2f2f2' : '',
      };
    },
    handleAvatarSuccess(response, file, index) {
      const imgUrl = response.data;
      const fileUrl = URL.createObjectURL(file.raw);
      // 更新数组中对应行的 imgUrl
      this.$set(this.setRubikData, index, {
        ...this.setRubikData[index],
        imgUrl: imgUrl,
        fileUrl:fileUrl,
      });
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传魔方图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleRubikTypeChange(value) {
      this.form.rubikImg = this.getRubikImagePath(value);
      this.updateRubikData(value);
    },
    getRubikImagePath(type) {
      let imgPath = '';
      switch (type) {
        case 1: imgPath = '/static/rubik/rubik1.png'; break;
        case 2: imgPath = '/static/rubik/rubik2.png'; break;
        case 3: imgPath = '/static/rubik/rubik3.png'; break;
        case 4: imgPath = '/static/rubik/rubik4.png'; break;
        case 5: imgPath = '/static/rubik/rubik5.png'; break;
      }
      // 如果需要添加基础API路径，可以在这里添加
      return `${process.env.VUE_APP_BASE_API}${imgPath}`;
    },

    // 更新 Rubik 数据的方法
    updateRubikData(type) {
      const typeMapping = {
        4: 3,
        5: 4
      };
      const adjustedType = typeMapping[type] || type;
      // 更新 setRubikData 数组
      this.setRubikData = Array.from({ length: adjustedType }, () => ({ imgUrl: '', url: '', fileUrl: '' }));
    },
    /** 查询魔方管理列表 */
    getList() {
      this.loading = true;
      listRubik(this.queryParams).then(response => {
        this.rubikList = response.data.data;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelChoose(){
      this.openChoose = false;
    },
    // 表单重置
    reset() {
      this.form = {
        rubikId: null,
        rubikImg: null,
        rubikType: 1,
        orderNum: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.rubikId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.handleRubikTypeChange(this.form.rubikType);
      this.open = true;
      this.title = "添加魔方";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const rubikId = row.rubikId || this.ids
      getRubik(rubikId).then(response => {
        this.form = response.data;
        this.setRubikData = this.form.setRubikData;
        console.log(this.form);
        this.open = true;
        this.title = "修改魔方";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.rubikId != null) {
            this.form.rubikImg = this.form.rubikImg.replace(process.env.VUE_APP_BASE_API, ''); // 如果需要去掉基础API路径
            updateRubik(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.rubikImg = this.form.rubikImg.replace(process.env.VUE_APP_BASE_API, ''); // 如果需要去掉基础API路径
            this.form.setRubikData = this.setRubikData;
            addRubik(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const rubikIds = row.rubikId || this.ids;
      this.$modal.confirm('是否确认删除魔方编号为"' + rubikIds + '"的数据项？').then(function() {
        return delRubik(rubikIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/rubik/export', {
        ...this.queryParams
      }, `rubik_${new Date().getTime()}.xlsx`)
    },
    handleChoose(index){
      this.indexChoose = index;
      this.selectedId = null;
      this.chooseAddressLinkRow = { url:'' };
      this.openChoose = true;
      this.titleChoose = "选择链接";
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMenuSelect(index) {
      this.selectedId = null;
      this.chooseAddressLinkRow = { url:'' };
      this.currentTableData = [];
      if(index === '2-1'){
        this.getGoodsList();
      }else if (index === '2-2'){
        this.isExpandAll = true;
        this.getCategoryList();
        this.toggleExpandAll();
      }else if (index === '2-3'){
        this.getGroupList();
      }else if (index === '4-1'){

      }else{
        chooseAddressLink(index).then(response => {
          this.currentTableData =  response.data
        });
      }
      this.current = index;
    },
    selectTableData(row) {
      this.selectedId = row.id;
      this.chooseAddressLinkRow = row;
    },
    selectItem(categoryIndex, itemIndex, item) {
      this.selectedId = item.id;
      this.chooseAddressLinkRow = item;
    },
    submitChooseForm(){
      // 将选中的 URL 赋值给第一个弹出框的表单项
      const url = this.chooseAddressLinkRow.url;
      if(url){
        // 关闭第二个弹出框
        this.$set(this.setRubikData, this.indexChoose, {
          ...this.setRubikData[this.indexChoose],
          url: url
        });
        this.openChoose = false;
      }else{
        this.$modal.msgError("请选择魔方图片链接");
      }
    },

    // 查询商品列表
    getGoodsList() {
      listChooseGoods(this.queryParamsGoods).then(response => {
        this.totalGoods = response.data.total??0;
        if(this.totalGoods>0){
          this.currentTableData = response.data.data.map(item => ({
            ...item, // 复制当前项的所有属性
            mainImgUrl: process.env.VUE_APP_BASE_API + item.mainImgUrl, // 拼接新的图片 URL
            //url:"/pages/goods/goods/index?id="+item.id,
          }));
        }else{
          this.currentTableData = response.data.data;
        }
      });
    },

    // 查询拼团商品列表
    getGroupList(){
      listChooseGroup(this.queryParamsGroup).then(response => {
        this.totalGroup = response.data.total??0;
        if(this.totalGroup>0){
          this.currentTableData = response.data.data.map(item => ({
            ...item, // 复制当前项的所有属性
            mainImgUrl: process.env.VUE_APP_BASE_API + item.mainImgUrl, // 拼接新的图片 URL
            //url:"/pages/goods/goods/index?id="+item.id,
          }));
        }else{
          this.currentTableData = response.data.data;
        }
      });
    },

    // 查询商品分类管理列表
    getCategoryList() {
      listCategory(this.queryParams).then(response => {
        this.currentTableData = response.data.map(item => ({
          ...item, // 复制当前项的所有属性
          id: item.categoryId,
          name:item.categoryName,
        }));
        this.currentTableData = this.handleTree(this.currentTableData, "categoryId");
      });
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
  }
};
</script>
<style>
.flex-container {
  display: flex;
  /*height: 100%;*/ /* 这将使得容器的高度等于其父元素（el-dialog的内容区域）的高度 */
  height: 580px;
  flex-direction: row; /* 子元素将水平排列 */
  margin: -30px -20px;
}

.flex-container > div {
  /* 第一个 div 是导航栏容器 */
  flex: 0 0 200px; /* 固定宽度为250px，不伸缩 */
  overflow-y: auto; /* 如果内容超出，则显示滚动条 */
}

.flex-container > div:last-child {
  /* 第二个 div 是表格容器 */
  flex: 1 1 auto; /* 占据剩余的空间，可以伸缩 */
  overflow-y: auto; /* 如果内容超出，也显示滚动条 */
}

.right_box {
  margin-left: 23px;
  font-size: 13px;
  -webkit-box-flex: 1;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.Box {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
}
.cont {
  color: #000;
  font-weight: 700;
}
.cont_box {
  font-weight: 400;
  color: rgba(0,0,0,.85);
  background: #fafafa;
  border-radius: 3px;
  text-align: center;
  padding: 7px 30px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.on {
  background-color: #0256ff!important;
  color: #fff!important;
}
</style>
